"use client"

import {ClerkProvider,useAuth} from "@clerk/nextjs"
import { ConvexProviderWithClerk } from "convex/react-clerk"

import {
    AuthLoading,
    Authenticated,
    ConvexReactClient

} from "convex/react"
import { Loading } from "@/components/auth/loading"
import { SignIn } from "@clerk/clerk-react"


interface ConvexClientProviderProps{
    children:React.ReactNode

};

const convexUrl=process.env.NEXT_PUBLIC_CONVEX_URL!;


const convex=new ConvexReactClient(convexUrl);

export const ConvexClientProvider =({
    children,
}:ConvexClientProviderProps) =>{
    return (
        <ClerkProvider publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY!}>
            <ConvexProviderWithClerk useAuth={useAuth} client={convex}>
                <AuthLoading>
                   <Loading/>
                </AuthLoading>
               
           
                <Authenticated>
                {children}
                </Authenticated>
               
            </ConvexProviderWithClerk>
        </ClerkProvider> 
    )
}